<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3-0自助下单</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/global.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/self-order.css">
</head>
<body>
    <header class="header">
        <p>自助下单</p>
    </header>
    <main class="main">
        <div class="main-top">
            <div class="rexian">
                <img src="img/self-order-1.png" alt="system">
                <span>热线</span>
            </div>
            <div class="fenjie-1"></div>
            <div class="dingdan">
                <img src="img/self-order-2.png" alt="system">
                <span>订单</span>
            </div>
        </div>

        <div class="fenjie-2"></div>
        <div class="main-select select-1">
            <img src="./img/self-order-3.jpg" alt="self-order">
            <span>选择服务事项</span>
            <img class="img" src="./img/self-order-9.png" alt="self-order">
        </div>
        <div class="fenjie-3"></div>
        <div class="main-select select-2">
            <img src="./img/self-order-4.png" alt="self-order">
            <span>选择服务设备</span>
            <img class="img" src="./img/self-order-9.png" alt="self-order">
        </div>
        <div class="fenjie-3"></div>
        <div class="main-select select-3">
            <img src="./img/self-order-5.png" alt="self-order">
            <span>上门服务地址</span>
            <img class="img" src="./img/self-order-9.png" alt="self-order">
        </div>
        <div class="fenjie-2"></div>
        <div class="main-select select-4">
            <img src="./img/self-order-6.png" alt="self-order">
            <span>任务描述</span>
        </div>
        <div class="fenjie-3"></div>
        <div class="miaoshu">请描述什么时候上门，需要的工具，问题描述，交付的要求等</div>
        <div class="fenjie-2"></div>
        <div class="main-select select-5">
            <img src="./img/self-order-7.png" alt="self-order">
            <span>上传照片</span>
        </div>
        <div class="fenjie-3"></div>
        <div class="shangchuan">
            <img src="./img/self-order-10.png" alt="shanchuan">
        </div>
        <div class="fenjie-2"></div>
        <div class="main-select select-6">
            <img src="./img/self-order-8.png" alt="self-order">
            <span>任务工期</span>
        </div>
        <div class="fenjie-3"></div>
        <div class="renwu">
            <a href=""><img src="./img/self-order-11.png" alt="self-order"></a>
            <input class="input-num" value="1" size="1">
            <a href=""><img src="./img/self-order-12.png" alt="self-order"></a>
            <span class="tian">天</span>
            <span class="money">￥1500</span>
            <span class="tianshu">x1天</span>
            <div class="yiwen">如有疑问，请在提交订单前联系客服！</div>
        </div>
    </main>
    <footer class="footer">
        <button>提交订单 计算价格</button>
    </footer>
</body>
</html>